<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
    table{
        width: 700px;
        border-collapse: collapse; /* 合并表格的边框 */
    }
    tr{
        height: 42px;
    }
    table,td,th{
        border: 1px solid black;
    }
    .box{
        background-color: #ddd;
        border-radius: 5px;  /* 边框圆角 */
        padding-top: 15px;
        padding-left: 30px;
        padding-bottom: 15px;
        width: 290px;
        height: 160px;
        position: fixed;
        margin: auto;
        left: 0px;
        right: 0px;
        top:0;
        bottom: 0;
        display: none;
    }
    </style>
</head>
<body>
    <button>添加商品</button>
    <br><br>
    <table>
        <tr>
            <th>商品ID</th>
            <th>商品标题</th>
            <th>商品数量</th>
            <th>商品价格</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>商品ID</td>
            <td>商品ID</td>
            <td>商品ID</td>
            <td>商品ID</td>
            <td>
                    <button>编辑</button>
                    <button>删除</button>
            </td>
        </tr>
    </table>
    
    <div class="box">
        商品标题: <input type="text"><br><br>
        商品数量: <input type="text"><br><br>
        商品价格: <input type="text"><br><br>
        <button>保存</button>
        <button>取消</button>
    </div>
</body>
</html>